<!--
  -- 描述：巡逻方式占比图
  -- 标签参数：cid（必填，ID，用来方法里区分统计图）、startTime、endTime、chartTitle、subText
  --
  -- 作者：cyq
  -- 时间：2018/10/22 11:40
-->
<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div v-show="hasPrep" :id="cid" style="width:100%;height:100%;"></div>
    <div v-if="!hasPrep" class="no-data-tip">{{subText||''}}无报备信息</div>
    <h2 v-if="!hasPrep&&chartTitle" style="padding: 5px 0 0 5px;">{{chartTitle}}</h2>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/shine'
  // 引入饼状图
  import 'echarts/lib/chart/pie'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'

  export default {
    name: "PatrolTypePie",
    props: ['cid','startTime','endTime','chartTitle','subText'],
    data() {
      return {
        // 统计图对象
        chartObj: null,
        // 查询统计参数
        params: {
          startTime: this.startTime||this.$moment().format('YYYY-MM-DD 00:00:00'),
          endTime: this.endTime||this.$moment().format('YYYY-MM-DD 23:59:59')
        },
        //
        dataList: [],
        hasPrep: true,
        showTitle: false
      }
    },
    mounted: function(){
      window.addEventListener('resize',() => this.resize(), false);
    },
    beforeDestroy: function(){
      window.removeEventListener('resize', this.resize(), false);
    },
    methods: {
      resize: function(){
        if(this.chartObj)
          this.chartObj.resize()
      },
      query: function(){
        if(this.startTime)
          this.params.startTime = this.startTime;
        if(this.endTime)
          this.params.endTime = this.endTime;
        this.api.post('/preparation/countPatrolType', this.params)
          .then((data) => {
            if(data.code===200){
              this.dataList = data.data;
              this.initChart();
            }else{
              this.$message.error(data.message);
            }
          });
      },
      initChart() {
        this.hasPrep = false;
        let _totalList = [];
        this.dataList.forEach((item) => {
          if(!this.hasPrep && item.TOTAL>0)
            this.hasPrep = true;
          _totalList.push({value: item.TOTAL, name: item.DICNAME});
        });

        if(!this.chartObj)
          this.chartObj = echarts.init(document.getElementById(this.cid), 'shine');

        let option = {
          title: {
            text: this.chartTitle||'巡逻方式占比图',
            subtext: this.subText||'今日',
            textStyle: {
              fontWeight: 'bold'
            }
          },
          tooltip : {
            trigger: 'item',
            confine: true,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
            {
              name:'访问来源',
              type:'pie',
              radius : '65%',
              center: ['50%', '50%'],
              data:_totalList.sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };

        this.chartObj.setOption(option);
      }
    }
  }
</script>

<style scoped>
  .no-data-tip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: darkgrey;
    font-size: 1.5em;
    width: inherit;
    text-align: center;
  }
</style>
